<template>
  <div class="cropper-container">
    <a-input
      type="file"
      @change="onFileChange"
    />
    <a-button
      type="file"
      @change="onFileChange"
    >上传</a-button>
    <div
      v-if="imageUrl"
      style="width:500px;height:950px;"
    >
      <a-select
        v-model="aspectRatio"
        @change="updateAspectRatio"
      >
        <a-select-option value="1">1:1</a-select-option>
        <a-select-option value="16/9">16:9</a-select-option>
        <a-select-option value="4/3">4:3</a-select-option>
        <a-select-option value="NaN">自由比例</a-select-option>
      </a-select>
      <img
        ref="image"
        :src="imageUrl"
        alt="Source Image"
      />
    </div>
    <div v-if="imageUrl">
      <div>
        <a-button @click="rotateImage(-90)">左旋转</a-button>
        <a-button @click="rotateImage(90)">右旋转</a-button>
        <a-button @click="zoomImage(0.1)">放大</a-button>
        <a-button @click="zoomImage(-0.1)">缩小</a-button>
      </div>
      <a-button @click="cropImage">裁剪图片</a-button>
      <div v-if="croppedImageUrl">
        <h3>裁剪后的图片:</h3>
        <img
          :src="croppedImageUrl"
          alt="Cropped Image"
        />
        <a-button @click="uploadImage">上传裁剪后的图片</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  name: 'CropperComponent',
  data() {
    return {
      imageUrl: null,
      cropper: null,
      croppedImageUrl: null,
      aspectRatio: 1
    };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        this.imageUrl = URL.createObjectURL(file);
        this.$nextTick(() => {
          if (this.cropper) {
            this.cropper.destroy();
          }
          this.initCropper();
        });
      }
    },
    initCropper() {
      this.cropper = new Cropper(this.$refs.image, {
        aspectRatio: this.aspectRatio,
        viewMode: 1
      });
    },
    updateAspectRatio() {
      if (this.cropper) {
        this.cropper.setAspectRatio(this.aspectRatio === 'NaN' ? NaN : Number(this.aspectRatio));
      }
    },
    rotateImage(degree) {
      if (this.cropper) {
        this.cropper.rotate(degree);
      }
    },
    zoomImage(ratio) {
      if (this.cropper) {
        this.cropper.zoom(ratio);
      }
    },
    cropImage() {
      if (this.cropper) {
        const canvas = this.cropper.getCroppedCanvas();
        this.croppedImageUrl = canvas.toDataURL('image/png');
      }
    },
    async uploadImage() {
      if (this.croppedImageUrl) {
        const formData = new FormData();
        const blob = await fetch(this.croppedImageUrl).then(res => res.blob());
        formData.append('croppedImage', blob, 'cropped-image.png');

        console.log('图片----:', formData);
      }
    }
  }
};
</script>

<style>
.cropper-container {
  text-align: center;
}
.cropper-container img {
  max-width: 100%;
}
.cropper-container button {
  margin: 5px;
}
</style>
